<template>
  <div>
    <!-- 目标：使用provide/inject传递数据
            作用： 跨多级传递

            步骤：
                1. 在前代里面写 provide 属性
                2. 在后代使用ineject属性接收

            注意点：
                provide 和 inject 绑定并不是可响应的
                然而，如果你传入了一个可监听的对象，那么其对象的 property 还是可响应的。

                要学会根据文档来学习
    
    -->
    <h1>Provider/inject传递数据</h1>
    <button @click="person.age++">add</button>
    <div>{{ person.age }}</div>
    <Child3 />
  </div>
</template>
<script>
import Child3 from "./Child3.vue";
export default {
  components: { Child3 },
  data() {
    return {
      pAge: 33,
      person: {
        age: 110,
      },
    };
  },
  //   1. 在前代里面写 provide 属性
  provide() {
    return {
      age: this.pAge,
      person: this.person,
    };
  },
};
</script>
